<template>
  <div class="layout-box">
    <div class="up">
      <div class="money">
        <div class="sums">
          <p>账户总额</p>
          <p>
            <span class="sumP">{{ accountNum }}</span
            >&emsp;元
          </p>
        </div>
        <div class="extract">
          <p>提现</p>
          <p>
            <span>{{ showMoney }}</span
            >&emsp;元
          </p>
        </div>
      </div>
      <el-button color="#000" @click="openGetMoney()">提现</el-button>
      <a href="javaScript:;" class="bankCard" @click="openBank">银行卡管理</a>
    </div>
    <div class="tabTitle">
      <p :class="{ active: 0 === tabMoney }" @click="cutTab(0)">提现记录</p>
      <p :class="{ active: 1 === tabMoney }" @click="cutTab(1)">收支明细</p>
    </div>
    <div class="down">
      <GetMoney v-show="0 === tabMoney" class="tab1"></GetMoney>
      <Income v-show="1 === tabMoney" class="tab2"></Income>
    </div>
    <BankCard
      class="maskCard"
      ref="bankShow"
      :totalMoney="cardSums"
      :cardNum="cardNum"
    ></BankCard>

    <el-dialog
      v-model="dialogFormVisible"
      title="提现金额"
      :close-on-click-modal="false"
    >
      <el-form :model="form" :rules="rules" ref="formRef">
        <el-form-item prop="getsMoney">
          <el-input
            type="number"
            v-model="form.getsMoney"
            placeholder="请输入欲提现的金额"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeGetMoney">取消</el-button>
          <el-button
            type="primary"
            @click="
              sureGetMoney(accountNum),
                closeGetMoney(),
                getClick(
                  cardSums + Number(form.getsMoney),
                  accountNum - Number(form.getsMoney),
                  form.getsMoney,
                  accountNum
                )
            "
          >
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue";
import BankCard from "./states/BankCard.vue";
import GetMoney from "../views/states/GetMoney.vue";
import Income from "./states/Income.vue";

import { notiFication } from "@/utils/message.js";
import { addMoneyRecord, bankUpdate, getInfo } from "../api/SaleFinance.js";

const accountNum = ref(0);
const cardSums = ref(0);
const cardNum = ref(0);

async function getAccount() {
  const res = await getInfo(1);
  console.log(res);
  accountNum.value = res.data.info.total;
  cardSums.value = res.data.info.cardsum;
  cardNum.value = res.data.info.cardnum;
}
getAccount();

/**
 * getClick
 * 调用仓库 渲染页面数据
 */
async function getClick(index1, index2, index3, index4) {
  if (index4 > index3) {
    const res2 = await bankUpdate(index1, index2);
    console.log(res2);
  } else {
    notiFication(`超出账户总额：${index4}`, "error");
  }
}

//赋初值为0
const tabMoney = ref(0);
/**
 * tabCuts
 * 控制点击提现及收支的切换效果
 * @param {number} index
 */
function cutTab(index) {
  tabMoney.value = index;
}

// 默认值为空
const bankShow = ref(null);
/**
 * openBank
 * 控制点击 “银行卡管理” 弹出银行卡信息框效果
 */
function openBank() {
  bankShow.value.open();
}

/**
 * validateForm
 * 表单验证 校验输入的值必须为数值类型
 * @param { string } rule
 * @param { number } value
 * @param { function } callback
 */
const validateForm = (rule, value, callback) => {
  const num = /^([1-9][\d]{0,}|0)(\.\d{1,2})?$/;
  if (isNaN(value) || !num.test(value)) {
    callback("必须输入数值");
  } else {
    callback();
  }
};
const formRef = ref(null);
const form = reactive({
  getsMoney: "",
});

const rules = reactive({
  getsMoney: [
    {
      required: true,
      message: "请输入数值",
      trigger: "blur",
    },
    {
      validator: validateForm,
      trigger: "blur",
    },
  ],
});

/**
 * sureGetMoney
 * 提现金额输入框 点击确定后 返回的校验结果
 */
const showMoney = ref("");
async function sureGetMoney(sum) {
  await formRef.value.validate((res) => {
    if (form.getsMoney && Number(form.getsMoney) < sum) {
      addMoneyRecord(form.getsMoney).then((res) => {
        window.localStorage.getsMoney = form.getsMoney;
        console.log(showMoney.value);
        console.log(res);
        notiFication("提现成功", "success");
      });
    } else {
      notiFication("提现失败", "error");
    }
  });
}
onMounted(() => {
  showMoney.value = window.localStorage.getsMoney;
});

// 是否显示提现金额输入框
const dialogFormVisible = ref(false);
/**
 * openGetMoney
 * 点击打开 提现金额输入框
 */
function openGetMoney() {
  dialogFormVisible.value = true;
}

/**
 * closeGetMoney
 * 点击隐藏 提现金额输入框
 */
function closeGetMoney() {
  dialogFormVisible.value = false;
  //   form.getsMoney = "";
}
</script>

<style lang="less" scoped>
.layout-box {
  width: 1280px;
  height: 1000px;
  margin: 30px 20px;
  border-radius: 5px;
  border: 1px solid rgb(242, 242, 242);
  box-shadow: 0px 0px 20px rgb(0 0 0 / 20%);
  position: relative;
  .up {
    width: 1240px;
    height: 200px;
    margin: 20px 0 0 20px;
    border: 1px solid rgb(228, 225, 225);
    padding: 20px 30px 0;
    box-sizing: border-box;
    position: relative;
    .money {
      width: 440px;
      height: 120px;
      //   margin-left: 30px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .sums,
      .extract {
        width: 200px;
        height: 100px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: flex-start;
        p:first-child {
          font-size: 18px;
          font-weight: 700;
        }
        p:last-child {
          font-size: 12px;
          span {
            font-size: 20px;
            font-weight: bold;
          }
          .sumP {
            color: rgb(245, 108, 108);
          }
        }
      }
    }
    .el-button {
      width: 80px;
      height: 30px;
      border-radius: 25px;
    }
    .bankCard {
      position: absolute;
      top: 20px;
      right: 30px;
    }
  }
  .tabTitle {
    width: 1240px;
    height: 80px;
    margin-left: 20px;
    display: flex;
    align-items: center;
    p {
      width: 78px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
    }
    .active {
      color: rgb(27, 52, 177);
      &::after {
        content: "";
        display: block;
        width: 78px;
        height: 2px;
        background: rgb(27, 52, 177);
        bottom: 0;
      }
    }
    P:last-child {
      margin-left: 40px;
    }
  }
  .down {
    width: 1240px;
    height: 500px;
    border: 1px solid rgb(228, 225, 225);
    margin-left: 20px;
    padding: 0 30px;
    box-sizing: border-box;
    .tab1,
    .tab2 {
      width: 850px;
    }
  }
  .maskCard {
    position: absolute;
    left: 0;
    top: 0;
  }
}
</style>
